<template>
    <view class="input-item">
        <text class="input-item-label"><text v-if="must==1" style="color: red;">*</text>{{ name }}</text>
        <view v-if="!custom" class="input-item-input" :style="bodyStyle">
            <iconfont color="#999" style="margin-right: 10px; flex-shrink: 0" size="22px" :name="icon"></iconfont>
            <slot></slot>
        </view>
        <view v-else class="">
            <slot></slot>
        </view>
    </view>
</template>

<script>
export default {
    name: 'input-item',
    props: {
        custom: Boolean,
        bodyStyle: Object,
        name: String,
        icon: String,
		must:String,
    },
    data() {
        return {};
    }
};
</script>

<style lang="scss" scoped>
.input-item {
    display: flex;
    flex-flow: column;
    margin: 20px 0;
    &-label {
        font-size: 16px;
        color: #999;
        margin: 8px 0;
    }
    &-input {
        border: 1px solid #999;
        border-radius: 8px;
        padding: 8px 8px;
        display: flex;
        align-items: center;
    }
}
</style>
